<template>
    <div class="page-profile-account">
        <Navigator>
            <template v-slot:center>
                <div class="title">切换账号</div>
            </template>
        </Navigator>

        <div class="body">
            <div v-for="(user, index) in accounts" :key="index" class="accounts">
                <div class="user row" @click="onChangeAccount(user)">
                    <div class="avatar">
                        <img :src="user.avatarImg" />
                    </div>
                    <div class="nickname">{{ user.nickName }}</div>
                </div>
            </div>

            <div class="btn-add" @click="toLoginPage">添加账号</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            accounts: []
        };
    },

    created() {
        this.getLocalAccounts();
    },

    methods: {
        getLocalAccounts() {
            let accounts = this.$browser.getStorage("wf-accounts") || [];

            let imgList = accounts.map(a => {
                return a.avatarUrl;
            });
            this.$cloudApi.getFilesUrl(imgList).then(list => {
                list.forEach((i, index) => {
                    accounts[index].avatarImg = i.url;
                });
                this.$browser.setStorage("wf-accounts", accounts);
                this.accounts = accounts;
                console.log("账户列表", accounts);
            });
        },

        async onChangeAccount(user) {
            try {
                await this.$login.signOut();
                await this.$login
                    .signInWithEmailAndPassword(user.email, user.password)
                    .then(res => {
                        this.$showToast("切换账号成功");
                        this.$router.push({
                            path: "/profile"
                        });
                    });
            } catch (error) {
                this.$showToast("系统异常");
            }
        },

        toLoginPage() {
            this.$router.push({
                path: "/login/index"
            });
        }
    }
};
</script>


<style lang="less" scoped>
.page-profile-account {
    background: #f5f5f5;
    min-height: 100vh;
    padding-top: 130px;
    .body {
        width: 100%;

        .accounts {
            .user {
                padding: 20px 30px;
                align-items: center;
                background: #fff;
                border-bottom: 1px solid #f5f5f5;

                .avatar {
                    width: 90px;
                    height: 90px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 30px;
                }

                .nickname {
                    font-weight: 500;
                    font-size: 34px;
                }
            }
        }

        .btn-add {
            margin-top: 30px;
            padding: 30px 0;
            text-align: center;
            background: #fff;
        }
    }
}
</style>